Improve display of code-blocks in README.md
#18
Conversation
README.md
Outdated
| ### Syntax highlighting with [`bat`](https://github.com/sharkdp/bat) | ||
|
|
||
| ```console | ||
| $ curl -sL https://mdn.io/Array | htmlq '#description ~ *' | bat -l html |
There was a problem hiding this comment.
I'm getting an empty result:
This is what I get when I fetch https://mdn.io/Array:
curl -sL https://mdn.io/Array | bat -l html
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ STDIN
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
1 │ <html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'><meta name='referrer' content='origin'><me
│ ta name='robots' content='noindex, nofollow'><meta http-equiv='refresh' content='0; url=/l/?uddg=https%3A%2F%2Fdeveloper.
│ mozilla.org%2Fen%2DUS%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray&rut=8e8be647aa3a967ad702ca33e4af9333
│ 8c0706ded1acd5ea363e0e2326dde70c'></head><body><script language='JavaScript'>function ffredirect(){window.location.replac
│ e('/l/?uddg=https%3A%2F%2Fdeveloper.mozilla.org%2Fen%2DUS%2Fdocs%2FWeb%2FJavaScript%2FReference%2FGlobal_Objects%2FArray&
│ rut=8e8be647aa3a967ad702ca33e4af93338c0706ded1acd5ea363e0e2326dde70c');}setTimeout('ffredirect()',100);</script></body></
│ html>
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────Instead of https://mdn.io/Array, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array works for me:
curl -sL https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array | htmlq '#description ~ *' | bat -l html
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ STDIN
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
1 │ <div><p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither th
│ e length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, a
│ nd data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this de
│ pends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features
│ are not desirable for your particular use, you might consider using typed arrays.</p>
...There was a problem hiding this comment.
🤔 That's odd. Seems like mdn.io doesn't respond to page requests if you haven't set a User-Agent header:
curl -qsL -A 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)' https://mdn.io/ArrayI didn't notice this because I have my ~/.curlrc file configured to send a convincing-looking User-Agent header with each request, since some webmasters configure their servers to block what they perceive to be automated traffic.
I wanted the example to be short-and-sweet, hence I chose a short but practical URL. 😞 Should I change it?
There was a problem hiding this comment.
This works for me!
curl -qsL -A 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)' https://mdn.io/ArrayI do like your short-and-sweet example, but I'm afraid that most people wouldn't have User-Agent in their ~/.curlrc and they might be confused when they see "empty".
How about example.com? for example:
$ curl -s example.com | htmlq 'body' | bat -l html
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ STDIN
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
1 │ <body>
2 │ <div>
3 │ <h1>Example Domain</h1>
4 │ <p>This domain is for use in illustrative examples in documents. You may use this
5 │ domain in literature without prior coordination or asking for permission.</p>
6 │ <p><a href="https://www.iana.org/domains/example">More information...</a></p>
7 │ </div>
8 │
9 │
10 │ </body>
───────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────There was a problem hiding this comment.
Done and done! I've updated the screenshot to match, too.
|
Hey! Thanks for your work here, that looks better. I've since made a couple of edits to the README which have caused a conflict, do you mind rebasing? I can do that later if you prefer. |
|
Conflicts resolved. |
|
That's great, thanks so much! |
This PR combines a bunch of cosmetic enhancements to the readme file, plus an extra example to showcase how
batcan be used to add syntax highlighting.The latter includes a screenshot that's uploaded as a file attachment to #17 (comment), since I didn't feel comfortable asking the author to accept a 19 KB blob of uncompressible image data in addition to a bunch of lightweight improvements.